<template>

  <el-card shadow="hover" class="mt10">
    <template #header>
      <div class="card-header">
        <span>历史填报</span>
      </div>
    </template>
    <el-table :data="taskRecordTable" highlight-current-row border class="data-table__content">
      <el-table-column label="任务名称" prop="taskName" />
      <el-table-column label="填报人" prop="username" />
      <el-table-column label="填报时间" prop="createTime" />
    </el-table>
  </el-card>

  <el-card shadow="hover" class="mt10" v-if="activityRole != 'AUDITOR'">
    <template #header>
      <div class="card-header">
        <span>历史审批</span>
      </div>
    </template>
    <div style="overflow-y: auto;">
      <el-table :data="taskAuditTable" highlight-current-row border class="data-table__content">
        <el-table-column label="任务名称" prop="taskName" />
        <el-table-column label="审批人" prop="auditUsername" />
        <el-table-column label="结果" prop="result">
          <template #default="scope">
            <el-tag v-if="scope.row.result" type="success">通过</el-tag>
            <el-tag v-else type="danger">拒绝</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="意见" prop="remark" />
        <el-table-column label="审批时间" prop="createTime" />
      </el-table>
    </div>
  </el-card>

</template>

<script setup lang="ts">
import ActivityNodeTaskAPI, {
  ActivityNodeTaskRecordDetail,
  ActivityNodeTaskAudit
} from "@/api/flow/activityNodeTask.api";

const taskRecordTable = ref<ActivityNodeTaskRecordDetail[]>();
const taskAuditTable = ref<ActivityNodeTaskAudit[]>();

const props = defineProps({
  taskId: {
    type: String,
    default: () => 0,
  },
  activityRole: {
    type: String,
    default: () => "",
  },
});


const handleQuery = () => {
  // 加载任务填报记录
  ActivityNodeTaskAPI.loadTaskRecordByTaskId(props.taskId).then((res) => {
    taskRecordTable.value = res;
  });
  // 加载审核记录
  ActivityNodeTaskAPI.loadTaskAuditByTaskId(props.taskId).then((res) => {
    taskAuditTable.value = res;
  });
};

watch(() => props.taskId, val => {
  if (!val) return;
  handleQuery();
}, {
  immediate: true,
  deep: true
})

</script>

<style scoped>
.selector-wrap {
  padding: 10px;
}
</style>
